<template>
  <Modal v-model="modal" title="请选择需与“积分组织”相关联的“数据组织”" @on-ok="onOk" @on-cancel="cancel">
    <span class="tips">
      <Icon type="md-alert" class="tips_icon" />
      提示：您可将以下数据组织与积分组织“{{sopOrgName}}”进行关联；关联后，如产生扣分，将从该人员“{{sopOrgName}}”的SOP积分中扣除
    </span>
    <div class="radioGroupClassBox" v-if="lenTask">
      <CheckboxGroup v-model="chooseOrg" vertical class="radioGroupClass"
        @on-change='checkChange'>
        <Checkbox v-for="(item,index) in taskList" :key="index" :label="item.id"
          class="radioClass">
          {{item.name}}
        </Checkbox>
      </CheckboxGroup>

    </div>

    <div v-else class="taskNo"> 暂无可关联的组织 </div>
  </Modal>
</template>

<script>
  export default {
    data() {
      return {
        okText: '确定',
        title: '请选择需要将任务移动至的分类',
        taskList: [],

        chooseOrg: [],
        modal: false,
        index: '',
        sopIndex: '',
        lenTask: true,
        sopOrgName: ''
      }
    },
    methods: {
      checkChange(val) {
        console.log(val, this.taskList);
      },
      onOk() {
        console.log(this.chooseOrg, 'vbbbbbbbbb');
        // if (this.chooseOrg && this.chooseOrg.length > 0) {

        // }

        console.log(this.taskList, 'this.taskList');
        let taskList1 = []
        this.taskList.forEach(item => {
          if (this.chooseOrg.indexOf(item.id) != -1) {
            taskList1.push(item)
          }
        })
        let obj = {
          taskList1: taskList1,
          index: this.index,
          sopIndex: this.sopIndex,
          chooseOrgVal: this.chooseOrg
        }

        this.$emit('chooseOrg', obj)

      },

      show(val, ids, index, sopIndex, sopOrgName) {
        this.sopIndex = sopIndex
        this.index = index
        this.taskList = val
        this.chooseOrg = ids
        this.lenTask = this.taskList.length > 0
        this.sopOrgName = sopOrgName
        this.modal = true
        console.log(val, ids, this.lenTask, 'show');


      },
      cancel() {
        this.chooseOrg = []
        this.taskList = []


      },
    }
  }
</script>

<style lang="scss" scoped>
  .radioGroupClassBox {
    .radioGroupClass {
      display: block;
      width: 100%;
    }

    .radioClass {
      border-bottom: 1px solid #e8eaec;
      display: block;
      padding: 10px 10px;
    }

    .radioClass:last-child {
      border: none;
    }

    .radioClass:first-child {
      border-top: 1px solid #e8eaec;
      margin-top: 20px;
    }
  }

  .tips {
    text-align: right;
    line-height: 32px;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }

  .taskNo {
    padding: 30px 0;
    text-align: center;
    color: #999;
  }
</style>